<template>
<view>
		
	<view class="mainAlertBg" v-if="showAlertFlag == 1">
		<!-- <view class="mainAlertBg" >	 -->
		
		<view class="showAlertCatBox">
			<view class="showAlertCatTitle">全部分类</view>
			

			
			<view class="cellBox2" @click="selectCatTop(-1)">
				
			
				<image class="cellBoxImage" v-if="selectcat1!=-1" :src="weinituijianicon"></image>
				
				<image class="cellBoxImage2" v-if="selectcat1==-1" :src="weinituijianicon"></image>
								
				<view class="cellBoxText" v-if="selectcat1!=-1">为你推荐</view>
				
				<view class="cellBoxText select" v-if="selectcat1==-1">为你推荐</view>
				
				
				
			</view>
			
			<view v-for="(item ,index) in catSource"  class="cellBox2" @click="selectCatTop(index)">	
				
				<image class="cellBoxImage" v-if="selectcat1!=index" :src="item.pic"></image>
				
				<image class="cellBoxImage2" v-if="selectcat1==index" :src="item.pic"></image>
								
				
				<view class="cellBoxText" v-if="selectcat1!=index">{{item.cate_name}}</view>
				
				<view class="cellBoxText select" v-if="selectcat1==index">{{item.cate_name}}</view>
				
				
				
			</view>
			
			
			<view  @click="showAlert(0)" class="alertBoxColse">
				
				<view class="sepLineView2"></view>
				
				<view class="tapShouqiView">点击收起</view>
				
				<image class="arrowDownImage" :src="arrowdown"></image>
				
				<!-- arrowdown -->
				
			</view>
			
			
			
		</view>
		
		
	</view>
	
	
	<view @click="gotoSearch()" class="topSearchBox">
		
		<image :src="searimage" class="imageSeachView"></image>
		
		<view class="seachDefaltText">搜索产品</view>
		
		
	</view>
		
	<view class="topBoxView">
			

		
		
		<view class="gotoShowAlert" @click="showAlert(1)">
			<text class="gotoShowAlertText">展</text>
			<text class="gotoShowAlertText">开</text>
			<image class="arrowupView" :src="arrowup"></image>
		</view>
		
		
		<scroll-view scroll-x="true"  class="scollerBox">
			
			
			
			
			<view class="catTopBoxView" :style="{width:catSource.length* 170 + 170  +'rpx'}">
			
			
				<view class="cellBox" @click="selectCatTop(-1)">
					
				
					<image class="cellBoxImage" v-if="selectcat1!=-1" :src="weinituijianicon"></image>
					
					<image class="cellBoxImage2" v-if="selectcat1==-1" :src="weinituijianicon"></image>
									
					<view class="cellBoxText" v-if="selectcat1!=-1">为你推荐</view>
					
					<view class="cellBoxText select" v-if="selectcat1==-1">为你推荐</view>
					
					
					
				</view>
				
				<view v-for="(item ,index) in catSource" class="cellBox" @click="selectCatTop(index)">	
					
					<image class="cellBoxImage" v-if="selectcat1!=index" :src="item.pic"></image>
					
					<image class="cellBoxImage2" v-if="selectcat1==index" :src="item.pic"></image>
									
					
					<view class="cellBoxText" v-if="selectcat1!=index">{{item.cate_name}}</view>
					
					<view class="cellBoxText select" v-if="selectcat1==index">{{item.cate_name}}</view>
					
					
					
				</view>
				
			</view>
			
			
			
		</scroll-view>
			
			
	</view>
	
	
	<scroll-view scroll-y="true" class="leftBoxScroller">
		
		

			
		<view v-for="(item ,index) in leftArray" >
			
			<view class="leftViewBox" v-if="selectcat2!=index" @click="selectLeftCat(index)">{{item.cate_name}}</view>
			
			<view class="leftViewBox select" v-if="selectcat2==index">
			    <view class="leftVerLine"></view>
			{{item.cate_name}}
			</view>
			
			
	
			
		</view>

		
		
		
	</scroll-view>
	
	
	
	<scroll-view scroll-y="true" ref="scrollView" @scrolltolower="productslist" :scroll-top="scrollTop"  class="rightGoodBox">
		
		<!-- {{scrollTop}} -->
		
		<view class='shupingShowBox' 
			v-for="(item,index) in weinituijianData" :key="index">
		
			<view class="sepLineView"></view>
			<image mode="aspectFit" :src='item.image'  @click="godDetail(item)" class="hengpingimage"></image>
			
			
			<view class="titleshubang">{{item.store_name}}</view>
			
			
			<text class="activeShubangbiaoqian"
				v-if="item.activity && item.activity.type === '1' && !promotions_type">秒杀</text>
			<text class="activeShubangbiaoqian"
				v-if="item.activity && item.activity.type === '2' && !promotions_type">砍价</text>
			<text class="activeShubangbiaoqian"
				v-if="item.activity && item.activity.type === '3' && !promotions_type">拼团</text>
			<text class="activeShubangbiaoqian" v-if="item.promotions.title">{{item.promotions.title}}</text>
					
			
					
			<view class="PriceShuban" v-if="isStore==0">￥{{item.price}}</view>
			
			<view class="PriceShuban" v-if="isStore==1">￥{{item.vip_price}}</view>
					
			<image v-if="item.stock>0" @click="addTocar(item)" class="shubanaddcar" src='../../static/images/addcar.png'></image>
			
			<view v-if="item.stock<=0" class="shubanNoStock" >已售罄</view>
			
		
		</view>
		
		
		
		
		
		
	</scroll-view>
		
	
			

</view>
</template>

<script>


import {
	getCategoryList,
	getProductslist
} from '@/api/store.js';	

import{
	mapGetters
} from 'vuex';
import {
	getUserInfo
} from '@/api/user.js';
import {
	getMyIntro,
	postCartAdd
} from '@/api/store.js';

	export default {
		computed: mapGetters(['isLogin', 'uid']),
		components: {

		},
		
	data() {
		return {
			weinituijianicon : '../../static/images/goodcat/weinituijian.png',
			searimage : '../../static/images/goodcat/cattopSearch.png',
			arrowup : '../../static/images/goodcat/arrowup.png',
			arrowdown : '../../static/images/goodcat/arrowdown.png',
			selectcat1 : -1,
			selectcat2 : 0,
			catSource : [],
			leftArray : [],
			weinituijianData: [],
			// goodAllInfo : [],
			page: 1,
			limit: 10,
			isStore : 0,
			
			scrollTop: 0,
			
			showAlertFlag : 0,
			
		}
	},
	
	onLoad(options) {
		
		this.getcat();
		
		this.getiweinituijian();
		
	},
	onReady() {
	},
	onShow() {
	
	},
	
	methods: {
		
		
		showAlert(flag){
			
			this.showAlertFlag = flag;
			
		},
		
		
		/*
		 * 获取用户信息
		 */
		getUserInfo: function() {
			let that = this;
			getUserInfo().then(res => {
		
				if ( res.data.user_type == 'store' ){
		
					that.isStore = 1;
					
				}else{
					
					that.isStore = 0;
				
				}
				
				
				
				
			});
		},
		
	
		
		// 产品列表
		productslist: function() {
			
			var that = this;
			
			var cid = that.catSource[this.selectcat1].id;
			
			var sid = that.catSource[this.selectcat1].children[this.selectcat2].id;
				
	
			
			console.log(cid);
			
			console.log(sid);
			
			getProductslist({
				page: that.page,
				limit: that.limit,
				type: 1,
				cid: cid,
				sid: sid
			}).then(res => {
			
				let list = res.data;
				if (that.page == 1){
					that.weinituijianData = list;
				}else{
					that.weinituijianData = that.$util.SplitArray(list, that.weinituijianData);
								
				}	
				
				console.log(that.weinituijianData);
		
				that.page = that.page + 1;
			}).catch(err => {
		
			});
		},
		
		
		
		
		
		
		
		//查找产品
		getiweinituijian(){
			
			this.getUserInfo();
			
			// console.log(12334);
			
			var postData = {
				
				page: 1,
				limit : 20
				
			};
			
			
			getMyIntro(postData).then(res => {
				let list = res.data;
				
				this.weinituijianData = list;
				// console.log(list);
				
			}).catch(err => {
			
			});
			
			
			
			
		},
		
		
		gotoSearch(){
			
			uni.navigateTo({
				url: '/pages/goods/goods_search/index'
			})
			
			
		},
		
		getcat(){
			
			
			let that = this;
			getCategoryList().then(res => {
				let data = res.data;
				this.catSource = data;
				
			})
			
			
			
			
		},	
		
		
		selectCatTop(index){
			
			this.showAlertFlag = 0;
			
			if (this.selectcat1 == index){
				return;
			}
			
			this.scrollTop = this.scrollTop?0:1;
			
			this.selectcat1 = index;
			
			if (index == -1){
				
				this.leftArray = [];
				
				this.getiweinituijian();
				
			}else{
				
				this.leftArray = this.catSource[index].children;
				
				this.page = 1;
				
				
				this.selectcat2 = 0;
				
				this.productslist();
				
			
				
	

				
			}
			
		},
		
		
		selectLeftCat(index){
			
			

			
			if (this.selectcat2 == index){
				return;
			}
			
			this.page = 1;
			
			this.scrollTop = this.scrollTop?0:1;

			
			this.selectcat2 = index;
			
			this.productslist();
			
		},
		
		
		godDetail(item) {
			
			uni.navigateTo({
				url: `/pages/goods_details/index?id=${item.id}`
			})
			
		},
	
		
		addTocar(item){
			
			
			//是否登录
			if (this.isLogin === false) {
				
				return this.$util.Tips({
					title: '去登录'
				});
				
			} else {
				
				this.addToCarPost(item);
				
			}
			
			
			
			
		},
		
		
		addToCarPost(item){
			
			
			
			var that = this;
			
			
			var cartNum = 1;
			
			console.log(item);
			
			if (this.isStore==1 && item.minimum_store_inventory > 0){
				cartNum = item.minimum_store_inventory;
			}
			
			
			let q = {
				cartNum: cartNum,
				productId:item.id
			};
				
				
			
			postCartAdd(q)
				.then(function(res) {
					
					
					that.$util.Tips({
						title: '添加购物车成功',
						success: () => {
							that.cartNum = res.data.cartNum;
							that.getCartCount(true);
						}
					});
					
					
				})
				.catch(err => {
					that.isOpen = false;
					return that.$util.Tips({
						title: err
					});
				});
			
			
			
			
			
		},
		
		
		
			
	}
}
</script>
<style scoped lang="scss">
	/deep/.mask{
		z-index: 99;
	}
.topBoxView{
	
	width: 100%;
	
	height: 333rpx;
	
	position: absolute;

	left: 0;
	
	top: 0;
	
	// background-image: linear-gradient(red, yellow);
	
	background-image: linear-gradient(to right, #EEFDF4 , #E8F5FD);
	
	
}

.topSearchBox{
	
	width: 516rpx;
	
	height: 62rpx;
	
	border: #1DB44F 2rpx solid;
	
	border-radius: 31rpx;
	
	left: 29rpx;
	
	top: 101rpx;
	
	position: absolute;
	
	
	z-index: 999999999;
	
}


.imageSeachView{
	
	width: 28rpx;
	
	height: 28rpx;

	left: 28rpx;
	
	top: 17rpx;
	
	position: absolute;
	
	
}

.seachDefaltText{
	
	width: 200rpx;
	
	height: 62rpx;
	
	line-height:60rpx;
	
	color: #999999;
	
	font-size: 28rpx;
	
	left: 69rpx;
	
	top: 0rpx;
	
	position: absolute;

}


.scollerBox{
	
	
	width: 657rpx;
	
	height: 180rpx;
	
	left: 0rpx;
	
	top: 183rpx;
	
	position: absolute;
	

	
	// background-color: red;
	
}


.catTopBoxView{
	
	width: auto;
	
	height: 100%;
	
	// background-color: #1DB44F;
	
	// dislay:inline-block;
	display: flex;
	
	flex-direction: row;
}


.cellBox{
	
	width: 170rpx;
	
	height: 100%;
	
	display: flex;
	
	flex-direction: column;
	
	// justify-content: space-between;

	align-items: center;
	
	&.style2{
		
		width: 20%;
		
		margin-top: 20rpx;
		
	}
	
}

.cellBox2{
	
	height: 100%;
	
	display: flex;
	
	flex-direction: column;
	
	align-items: center;
		
	width: 20%;
		
	margin-top: 20rpx;
		
}





.cellBoxImage{
	
	width: 82rpx;
	
	height: 82rpx;
	
	border-radius: 30rpx;
	
	border: #ffffff 4rpx solid;
	

	
}




.cellBoxImage2{
	
	width: 82rpx;
	
	height: 82rpx;
	
	border-radius: 30rpx;
	
	border: #1DB44F 4rpx solid;
		
	
}



.cellBoxText{
	
	
	// width: 100%;
	
	margin-top: 11rpx;
	
	color: #333333;
	
	font-size: 22rpx;
	
	height: 40rpx;
	
	line-height: 40rpx;
	
	border-radius: 20rpx;
	
	padding-left: 10rpx;
	
	padding-right: 10rpx;
	
	
	&.select{
		
		background-color: #1DB44F;
		
		color: #ffffff;
		
	}
	
}


.leftBoxScroller{
	
	background-color: #f9f9f9;
	
	position: absolute;
	
	left : 0;
	
	top: 333rpx;
	
	width: 178rpx;
	
	height: calc(100vh - 333rpx  );
	
	padding-bottom: env(safe-area-inset-bottom);
	
	
	
}

.leftViewBox{
	
	width: 100%;

	
	height: 104rpx;
	
	line-height: 104rpx;
	
	text-align: center;
	
	overflow: hidden;
	
	color : #333333;
	
	font-size: 24rpx;
	
	font-weight: bold;
	
	position: relative;
	
	
	&.select{
		
		background-color: #ffffff;
		color :#1DB44F;
	}
	
	
	
}

.leftVerLine{
	
	background-color:#1DB44F;
	
	width: 6rpx;
	
	position: absolute;

	top: 18rpx;
	
	bottom: 18rpx;
	
	left : 0;
	
}


	
.rightGoodBox{
	
	position: relative;
	
	display: flex;
	
	flex-direction: column;
	
	
	
	background-color: #ffffff;
	
	position: absolute;
	
	left : 178rpx;
	
	top: 333rpx;
	
	width: 572rpx;
	
	height: calc(100vh - 333rpx  );
	
	padding-bottom: env(safe-area-inset-bottom);
	
}
	




.shupingShowBox{
	
	
	// background-color: #65bc53 !important;
	position: relative;
	
	width: 100%;
	
	height: 211rpx;
	
	// margin-top: 20rpx;
	
	margin-left: 0rpx !important;
	
	// margin-top: 20rpx;
	
	// background-color: red !important;
	
	
}

.hengpingimage{
	
	position: absolute;
	
	top: 41rpx;
	
	left : 24rpx;
	
	width: 153rpx;
	
	height: 131rpx;
	
}


.sepLineView{
	
	
	position: absolute;
	
	bottom: 0rpx;
	
	left : 205rpx;
	
	width: 510rpx;
	
	height: 1rpx;
	
	background-color: #E0E4ED;
	
}

.sepLineView2{
	
	
	position: absolute;
	

	
	left : 0rpx;
	
	right: 0;
	
	top: 0;
	
	height: 1rpx;
	
	background-color: #E0E4ED;
	
}


.titleshubang{
	
	position: absolute;
	
	top: 29rpx;
	
	left : 205rpx;
	
	width: 300rpx;
	
	height: 40rpx;
	
	line-height: 40rpx;
	
	font-size: 26rpx;
	
	color: #222222;
	
	overflow : hidden;
	
	// background-color: red;
	
	font-weight: bold;
	
	
}


.activeShubangbiaoqian{
	
	
	position: absolute;
	
	top: 76rpx;
	
	left : 205rpx;
	

	
	height: 32rpx;
	
	font-size: 20rpx;
	
	border: #B88F45 1px solid;
	
	color: #B88F45;
	
	border-radius: 6rpx;
	
	padding-left: 11rpx;
	
	padding-right: 11rpx;
	
	// font-weight: bold;
	
	
	
}


.PriceShuban{
	
	
	position: absolute;
	
	top: 156rpx;
	
	left : 205rpx;
	
	
	
	height: 32rpx;
	
	font-size: 36rpx;

	
	color: #FE5030;
	

	
	font-weight: bold;
	
	
	
	
}

.shubanaddcar{
	
	position: absolute;
	
	bottom: 19rpx;
	
	right : 30rpx;
	
	height: 46rpx;
	
	width: 46rpx;
	
}


.shubanNoStock{
	
	position: absolute;
	
	bottom: 19rpx;
	
	right : 30rpx;
	
	// height: 46rpx;
	
	color: #cccccc;
	
	font-size : 25rpx;
	
	// width: 46rpx;
	
}


.hengpingBox{
	
	position: relative;
	
	display: flex;
	
	flex-direction: row;
	
	flex-wrap: wrap;
	
	
	
	
}


.hengpingLeftBox{
	
	width: 344rpx;
	
	// height : 518rpx;
	
	background-color: white;
	
	border-radius: 20rpx;
	
	position: relative;
	
	margin-top: 24rpx;
	
	margin-left: 24rpx;
	
	display: flex;
	
	flex-direction: column;
	
	// align-items: ;
	
	
}

.shupingimage{
	
	margin-top: 24rpx;

	width: 344rpx;
		
	height: 344rpx;
	
}



.titlehengban{
	
	// position: absolute;
	
	margin-left: 18rpx;
	
	margin-top: 18rpx;
	
	width: 290rpx;
	

	
	font-size: 28rpx;
	
	color: #333333;
	
	font-weight: bold;
	
	// background-color: #65bc53;
	
	
}


.activeNameBox{
	
	position: relative;
	
	margin-top: 23rpx;
	
	margin-left: 21rpx;
	
	
	
	height: 32rpx;
	

	
	
}


.activehengbangbiaoqian{
	
	position: absolute;
	
	left: 0;
	
	top: 0;

	
	height: 32rpx;
	
	font-size: 20rpx;
	
	border: #B88F45 1px solid;
	
	color: #B88F45;
	
	border-radius: 6rpx;
	
	padding-left: 11rpx;
	
	padding-right: 11rpx;
	
	// font-weight: bold;
	
	
	
}




.PriceHengban{
	
	
	// position: absolute;
	
	// top: 152rpx;
	
	// left : 239rpx;
	
	position: relative;
	
	margin-top: 23rpx;
	
	margin-left: 21rpx;
	
	height: 32rpx;
	
	font-size: 36rpx;

	
	color: #E93D34;
	

	
	font-weight: bold;
	
	margin-bottom: 38rpx;
	
	
}

.gotoShowAlert{
	
	width: 80rpx;
	
	height: 197rpx;

	
	position: absolute;
	
	right: 0;
	
	bottom: 0;
	
	display: flex;

	flex-direction: column;
	
	align-items: center;
	
	justify-content: center;
	// background-color: rebeccapurple;
	
}


.gotoShowAlertText{
	
	position: relative;
	
	width: 100%;
	
	text-align: center;
	
	corlor : #222222;
	
	font-size: 24rpx;
	
	font-weight: bold;
	
	// height: 20rpx;
	
	// background-color: #1DB44F;
	
	
}


.arrowupView{
	
	width: 16rpx;
	
	height: 8rpx;
	
	margin-top: 8rpx;
	
	
}


.mainAlertBg{
	
	
	position: absolute;
	
	left: 0;
	
	top: 0;
	
	// top: 183rpx;
	
	height: 100%;
	
	// height: calc(100vh - 183rpx);
	
	width: 100%;
	
	background-color: rgba( 0, 0, 0, 0.5);
	
	z-index: 999999;
	
	
}


.showAlertCatBox{
	
	width: 100%;
	
	background-color: #ffffff;
	
	border-radius: 0 0 24rpx 24rpx;
	
	position: relative;
	
	display: flex;
	
	flex-direction: row;
	
	flex-wrap: wrap;
	
}

.showAlertCatTitle{
	
	height: 80rpx;
	
	line-height: 80rpx;
	
	margin-top: 183rpx;
	
	margin-left:29rpx;
	
	width: 700rpx;
	
	
}

.alertBoxColse{
	
	position: relative;
	
	width: 100%;
	
	height: 80rpx;
	
	margin-top: 47rpx;
	
	display: flex;
	
	flex-direction: row;
	
	justify-content: center;
	
	align-items: center;
	
}

.tapShouqiView{
	
	corlor : #333333;
	
	font-size: 26rpx;
	
	font-weight: bold;
	
	
}

.arrowDownImage{
	
	width: 20rpx;
	
	height:12rpx;
	
	margin-left: 15rpx;	
}
	

</style>
